<template>
  <div class="wangzhezhushou">
    <div class="title">
      <div class="hdbox">
        <a javascript
           class="ha ha-1"></a>
        <a javascript
           class="ha ha-2"></a>
        <a javascript
           class="ha ha-3"></a>
        <a javascript
           class="ha ha-4"></a>
      </div>
    </div>
    <div class="bg-video">
      <div class="dele"
           @click="none">x</div>
      <video src></video>
    </div>

    <div class="line line1">
      <!-- <video src="../../../assets\head.mp4"
             autoplay
             loop></video> -->
      <div class="ewm">
        <img src="//game.gtimg.cn/images/yxzj/cp/a20181201camp/ewm.png"
             alt />
      </div>
      <div class="inner">
        <img src="//game.gtimg.cn/images/yxzj/cp/a20181201camp/hd-text.png"
             class="hd-text"
             width="600"
             height="140"
             alt="《王者荣耀》官方APP《王者营地》华丽上线" />
        <a href="javascript:;"
           onclick="return;PTTSendClick('btn','video','视频');"
           class="video"
           title="视频"
           @click="show">视频</a>
        <div class="arrow">
          <p class="spr"></p>
        </div>
      </div>
    </div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
  </div>
</template>
<script>
export default {
  data: () => ({
    screenHeight: window.innerHeight,
    screenWidth: window.innerWidth,
    imgHeight: '',
    num: 0,
    line: '',
    ewm: '',
    flag: true
  }),
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'margin:0px;')
    // 去除滚动条
    document.querySelector('body').setAttribute('style', 'overflow-y: hidden')
  },
  beforeDestroy () {
    document.querySelector('body').removeAttribute('style')
  },

  created () {
  },

  mounted () {
    // 删除统一的头部
    document.querySelector('.header').remove()
    // 每个单独页面的大小
    this.line = document.querySelectorAll('.line')
    this.creatheight()

    // 二维码的大小与窗口大小的关系
    this.ewm = document.querySelector('.ewm img')
    // 设置当前页面的宽度
    document.querySelector('.line').style.height = window.innerHeight + 'px'
    this.setEwm()

    // 监听窗口大小变化 只有窗口发生变化时才会执行
    window.onresize = () => {
      console.log(2222)
      this.screenHeight = window.innerHeight
      this.screenWidth = window.innerWidth
      this.creatheight()
      this.setEwm()
    }
    // 监听鼠标滚动
    // this.imgHeight = document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('mousewheel', this.handleScroll)
  },
  methods: {
    // 每个单独页面的大小
    creatheight () {
      for (var i = 0; i < this.line.length; i++) {
        this.line[i].style.height = this.screenHeight + 'px'
        this.line[i].style.width = this.screenWidth + 'px'
      }
    },
    // 二维码与窗口大小的关系
    setEwm () {
      this.ewm.style.width = this.screenHeight > this.screenWidth ? this.screenHeight * 0.1 + 'px' : this.screenWidth * 0.1 + 'px'
    },
    show () {
      document.querySelector('.bg-video').style.display = 'block'
    },
    none () {
      document.querySelector('.bg-video').style.display = 'none'
    },
    handleScroll (e) {
      if (this.flag) {
        this.flag = false
        var direction = e.deltaY > 0 ? 1 : -1 // 该语句可以用来判断滚轮是向上滑动还是向下
        this.num += direction
        if (this.num <= 0) {
          this.num = 0
        } else if (this.num >= 4) {
          this.num = 4
        }
        console.log(this.num)

        document.documentElement.scrollTop = window.innerHeight * this.num
        let target = this.screenHeight * this.num
        console.log(target)
        let current = window.scrollY - (direction * this.screenHeight)
        console.log(current)
        let timer = setInterval(() => {
          let step = target > current ? parseInt(Math.ceil((target - current) / 10)) : parseInt(Math.ceil((target - current) / 10))
          current += step
          window.scrollTo(0, current)
          if (Math.abs(target - current) <= 10) {
            clearInterval(timer)
            window.scrollTo(0, target)
            this.flag = true
          }
        }, 10)
      }
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  .qu {
    display: none;
  }
}
.wangzhezhushou {
  .title {
    background: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/hd-nav.jpg) 50% 0, no-repeat;
    background-color: darkgray;
    height: 88px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    .hdbox {
      width: 672px;
      margin-left: 40%;
      a {
        background: red;
        width: 128px;
        height: 88px;
        display: inline-block;
        line-height: 88px;
        margin: 0 20px;
      }
      .ha {
        background: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/hd-a.png);
      }
      .ha-1 {
        background-position: -30px 0;
      }
      .ha-2 {
        background-position: -230px 0;
      }
      .ha-3 {
        background-position: -430px 0;
      }
      .ha-4 {
        background-position: -630px 0;
      }
    }
  }
  .bg-video {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    // display: block;
    position: absolute;
    z-index: 100;
    .dele {
      width: 70px;
      // height: 50px;
      height: 70px;
      background: #52313b;
      color: #fff;
      font-size: 70px;
      line-height: 60px;
      // padding-bottom: 10px;
      text-align: center;
      position: absolute;
      margin: auto;
      top: -130px;
      left: 473px;
      bottom: 0;
      right: 0;
    }
    video {
      height: 200px;
      width: 400px;
      background: rgb(54, 238, 8);
      position: absolute;
      margin: auto;

      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
  .line {
    // height: 1080px;
    min-height: 318px;
    min-width: 500px;
    background-size: cover;
  }
  .line1 {
    background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/p1-bg.jpg);
    .ewm {
      position: absolute;
      top: 50%;
      right: 50px;
    }
    .inner {
      width: 80%;
      height: 100%;
      vertical-align: top;
      margin: 0 auto;
      position: relative;
    }
    .hd-text {
      display: block;
      position: absolute;
      top: 65%;
      left: 50%;
      margin-left: -25%;
      width: 600px;
      height: 17%;
    }
    .video {
      background: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/video.png) no-repeat;
      width: 9%;
      height: 12%;
      position: absolute;
      top: 36%;
      left: 65%;
      display: block;
      font-size: 0;
      background-size: 80% auto;
    }
    .arrow {
      background: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/arrow.png) no-repeat;
      width: 246px;
      height: 101px;
      position: absolute;
      bottom: 12%;
      left: 43%;
      margin-left: -123px;
    }
    .arrow p {
      background-position: -430px 0;
      width: 42px;
      height: 96px;
      position: absolute;
      top: -10px;
      left: 50%;
      margin-left: -21px;
      -webkit-animation: arrow 0.6s infinite alternate;
      animation: arrow 0.6s infinite alternate;
    }
    .spr {
      background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/spr.png);
      background-repeat: no-repeat;
      display: block;
      font-size: 0;
    }
  }
  .line2 {
    background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/p2-bg.jpg);
  }
  .line3 {
    background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/p3-bg.jpg);
  }
  .line4 {
    background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/p4-bg.jpg);
  }
  .line5 {
    background-image: url(//game.gtimg.cn/images/yxzj/cp/a20181201camp/p5-bg.jpg);
  }
}
</style>
